<template>
  <el-popover placement="top" :visible="dialogVisible" :width="400">
    <template #reference>
      <el-checkbox
        v-model="row.check"
        @change="checkChange(row)"
        label="腰椎间盘"
      />
    </template>
    <div class="flex a-c j-s-b table-header">
      <span class="flex-1"> 方法 </span>
      <span style="width: 70px"> 造影 </span>
    </div>
    <div class="flex a-c j-s-b table-body">
      <span class="flex-1 left-centent" style="margin-left: 10px">
        <el-radio-group v-model="row.radio" class="radio">
          <el-radio :value="0">平扫</el-radio>
          <el-radio :value="1">增强扫描</el-radio>
        </el-radio-group>
        <el-checkbox-group v-model="row.checkList">
          <el-checkbox label="三维重建" value="3" />
        </el-checkbox-group>
      </span>

      <span class="tbody-th"> </span>
    </div>
    <div class="flex j-s-b mt12">
      <el-button @click="cleanr(row)">清除单选</el-button>
      <div>
        <el-button @click="close(row)">取消</el-button>
        <el-button @click="submit(row)" type="primary">确定</el-button>
      </div>
    </div>
  </el-popover>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    row?: Object;
  }>(),
  {
    modelValue: false,
    row: () => {},
  }
);
const dialogVisible = ref<boolean>(false);
dialogVisible.value = props.modelValue;
const emit = defineEmits([
  "update:modelValue",
  "close",
  "submit",
  "checkChange",
]);
watch(
  () => props.modelValue,
  () => {
    dialogVisible.value = props.modelValue;
  }
);
watch(dialogVisible.value, async () => {
  emit("update:modelValue", dialogVisible.value);
});
const submit = () => {
  dialogVisible.value = false;
  emit("update:modelValue", dialogVisible.value);
  emit("submit");
};
const checkChange = () => {
  emit("checkChange");
};
const close = () => {
  dialogVisible.value = false;
  emit("update:modelValue", dialogVisible.value);
  emit("close");
};
</script>

<style lang="scss" scoped>
.table-header {
  span {
    display: block;
    text-align: center;
    padding: 4px 0px;
    border: 1px solid rgb(220, 223, 230);
  }
  span:nth-child(1) {
    border-right: none;
  }
}
.table-body {
  border: 1px solid rgb(220, 223, 230);
  border-top: none;
  .left-centent {
    border-right: 1px solid rgb(220, 223, 230);
  }
  .radio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  span {
    display: block;
    padding: 4px 0px;
    border-top: none;
  }
  span:nth-child(1) {
  }
  span:nth-child(2) {
    border: none;
  }
  .tbody-th {
    height: 100%;
    width: 70px;
    display: block;
    border: 1px solid rgb(220, 223, 230);
  }
}
</style>
